<template>
    <div>
        <Myref ref="sf">
            <list :imgs="imgs" :start="start" ref="imgshow"></list>
            <router-link to="/rtem2">去第二个页面</router-link>
            <ul class="list-warp">
                <li v-for="(li,n) in items.mydata" :key="n">{{li}}</li>
            </ul>

            <div @click="imgshow">显示</div>
            <tagging :src="simg"></tagging>
            <router-link to="/rtem2">去第二个页面</router-link>
            <!-- <input type="file" @change="setImg()" ref="file"> -->
            <!-- <img :src="src" alt=""> -->
        </Myref>
    </div>
</template>
<script>
import Myref from '@/components/ref/ref.vue';// 引用模板
import img from '@/js/utils/img.js';// 引用模板
import list from '@/components/showImg/showImg.vue';// 引用模板
import tagging from '@/components/Tagging/Tagging.vue';// 引用模板
// 组件模块
export default {
    name: 'demo',
    data () {
        return {
            items: {mydata: [1]},
            src: false,
            imgs: ['./static/img/b1.jpg', './static/img/a2.jpg', './static/img/3.jpg'],
            start: 0,
            simg: './static/img/a2.jpg'
        };
    },
    components: {Myref, list, tagging},
    activated () {
        this.$refs.sf.setTop();// 复原位置
    },
    // 方法属性
    methods: {
        setImg () {
            let that = this;
            img(this.$refs.file.files[0], {width: 750, watermark: '我是思源'}, function (d) {
                that.src = d;
            });
        },
        test (data) {
            console.log(data);
        },
        imgshow () {
            this.$refs.imgshow.show();
            this.$refs.imgshow.moveTo(1);
        }
    },
    // 组件创建勾子只执行一次
    created () {
        console.log('temp1');
    },
    // 组件渲染完成勾子只执行一次
    mounted () {
        var that = this.$refs.sf;
        that.items.ref = function () {
            console.log('可以调数据了');
            setTimeout(function () {
                that.succ();
                console.log('数据回来了');
            }, 2000);
        };
        that.IsLast(50, function (a, b, c) {
            console.log(a);
            console.log(b);
            if (c) {
                console.log('到底了');
            }
        });
    }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- <style scoped lang="less"> -->
<style scoped>
/* @import url(''); */
/* 这里面写样式 */
/*下面为自写CSS与该组件无关*/
.list-warp {
    padding-left: 0.16rem;
    color: #333;
}
.list-warp li {
    border-bottom: 1px solid #dddee3;
    padding: 0.1rem 0 0.1rem 0;
    height: 0.6rem;
    line-height: 0.6rem;
}
p{height: 80px;}
</style>
